<!-- 司机管理 -->
<template>
  <div class="containers">
    <TablePage
      v-model:change="driverModel.pageIndex"
      :page-list="pageList3"
      :columns="tableColumns3"
      :page-count="pageCount"
      @click-search="queryData"
    >
      <template #search>
        <TableSearch
          v-model:change="driverModel.deptId"
          :model="driverModel.deptId"
          :datas="depts"
          left-title="设备类型"
        />
        <TableSearch
          v-model:change="driverModel.content"
          :model="driverModel.content"
          type="input"
          left-title="关键字"
        />
      </template>
    </TablePage>

    <Dialog v-model="dialogVisible" :title="dialogTitle">
      <template #content>
        <div class="flex-c">
          <el-form label-width="100px">
            <el-form-item label="设备类型">
              <el-select v-model="sensorModel.sensorId" style="width: 100%" placeholder="请选择">
                <el-option
                  v-for="item in depts"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>

            <el-form-item label="设备名称">
              <el-input v-model="sensorModel.sensorId" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="设备编号">
              <el-input v-model="sensorModel.sensorId" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="sensorModel.sensorId" placeholder="请输入" />
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #footer>
        <ElButton
          v-if="actionType !== 'detail'"
          type="primary"
          :loading="loading"
          @click="dialogVisible = false"
        >
          保存
        </ElButton>
        <ElButton @click="dialogVisible = false">关闭</ElButton>
      </template>
    </Dialog>

    <Dialog v-model="openDialogVisible" :title="dialogTitle">
      <template #content>
        <div class="flex-c">
          <p>当前状态：<span style="color: red">开启</span></p>
          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="手动控制" name="first">
              <el-switch v-model="switchValue" inactive-text="开关"
            /></el-tab-pane>
            <el-tab-pane label="定时控制" name="second">
              <div class="block">
                <span class="demonstration">时间设置</span>
                <el-date-picker
                  v-model="value2"
                  type="datetimerange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                /> </div
            ></el-tab-pane>
            <el-tab-pane label="自动控制" name="third"
              >当执行农事计划时，条件满足是执行</el-tab-pane
            >
          </el-tabs>
        </div>
      </template>
      <template #footer>
        <ElButton @click="dialogVisible = false" type="primary">保存</ElButton>
      </template>
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import { TableSearch } from '@/components/TableSearch'
import { TablePage } from '@/components/TablePage'
import { Dialog } from '@/components/Dialog'
import useBaseDriver from '@/composables/driver/useBaseDriver'
import useDriverRequest from '@/composables/driver/useDriverRequest'
import { ref } from '@vue/reactivity'
const activeName = ref('first')
const switchValue = ref(false)
const value2 = ref('')
let {
  depts,
  driverModel,
  tableColumns3,
  dialogVisible,
  dialogTitle,
  sensorModel,
  openDialogVisible
} = useBaseDriver()
let { pageList3, pageCount, getDriverInfoListApi } = useDriverRequest()
const queryData = () => {
  getDriverInfoListApi(driverModel)
}
</script>
<style lang="less" scoped></style>
